<template>
  <div>
    <div class="goodsImgList-mokuai">
      <!-- 数据模块 -->
      <div class="goodsImgList-index">
        <div class="goodsImgList-index-top">
          <div class="goodsImgList-name">
            <div class="goodsImgList-name-font">
              <i class="el-icon-s-unfold"></i>
              数据列表
            </div>
            <div class="freightTemp-index-select">
              <div class="goodsImgList-left goodsImgList-index-select-button">
                <el-button @click="onSubmitImg" size="small">添加</el-button>
              </div>
              <div class="goodsImgList-left">
                <el-form :inline="true" :model="listLine" class="demo-form-inline" size="small">
                  <el-form-item label>
                    <el-select v-model="listLine.sort" placeholder="排序方式" class="select-width-2">
                      <el-option label="角色名字" :value="0"></el-option>
                      <el-option label="职能" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="goodsImgList-content">
            <!-- 数据列表 -->
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="name" label="角色名称" width="100" align="center">
                  <!-- <template slot-scope="scope">{{ scope.row.number }}</template> -->
                </el-table-column>
                <el-table-column prop="remark" label="职能描述" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="userNum" label="成员数量" width="90" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="memberClick(scope.$index, scope.row)"
                    >{{ scope.row.userNum}}</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="createDate" label="添加时间" width="170" align="center"></el-table-column>
                
                <el-table-column label="是否启用" width="90" align="center">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.value"></el-switch>
                  </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="160" align="center">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.id)" type="text" size="small">权限设置</el-button>
                    <el-button @click="handleClickTwo(scope.row.id)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 页脚 -->
            <div class="goodsImgList-paging">
              <!-- 分页 -->
              <div class="goodsImgList-paging-layout">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹出框 -->
    <div>
      <el-dialog title="编辑部门" :visible.sync="FormVisible" style="width: 80%">
        <el-form :model="form" label-width="90px" ref="pojoForm" :rules="rules">
          <el-form-item label="*部门名称:" prop="name">
            <el-input v-model="form.name" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="*职能描述:" prop="remark">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="form.remark"
              style="width: 300px;"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="FormVisible= false">取 消</el-button>
          <el-button
            type="primary"
            @click="form.id === null ? addData('pojoForm'): updateData('pojoForm')"
          >确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>




<script>
import roleApi from "@/api/settings/role";
export default {
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "角色名称不能为空", trigger: "blur" }
        ],
        remark: [
          { required: true, message: "只能描述不能为空", trigger: "blur" }
        ]
      },
      total: 0, // 总记录数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示10条数据,
      // 弹出框
      FormVisible: false,
      form: { id: null, name: "", remark: "" },
      // 筛选
      listLine: {
        row: "",
        sort: 0
      },
      // 列表数据
      tableData: [],
      operation: {
        opertationType: ""
      },
      // 分页
      currentPage4: 4
    };
  },

  watch:{
    "listLine.sort":function(){
      this.fetchData();
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    // 当每页显示条数改变后,被触发 , val是最新的每页显示条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    // 当页码改变后,被触发 , val 是最新的页面
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    //删除
    handleDelete(id) {
      this.$confirm("确认删除这条记录吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消"
      })
        .then(() => {
          roleApi.deleteById(id).then(response => {
            const resp = response.data;
            this.$message({
              message: resp.msg,
              type: resp.code == 0 ? "success" : "error"
            });
            if (resp.code == 0) {
              // 删除成功，刷新列表数据
              this.fetchData();
            }
          });
        })
        .catch(() => {
          // 取消，不用理会
          console.log("取消");
        });
    },
    //新增
    addData(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          roleApi.add(this.form).then(response => {
            const resp = response.data;
            if (resp.code == 0) {
              //新增成功，刷新列表数据
              this.fetchData();
              this.FormVisible = false; // 关闭窗口
            } else {
              this.$message({
                message: resp.msg,
                type: "warning"
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    //修改
    updateData(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          roleApi.updateById(this.form).then(response => {
            const resp = response.data;
            if (resp.code == 0) {
              //新增成功，刷新列表数据
              console.log(resp.code);
              this.fetchData();
              this.FormVisible = false; // 关闭窗口
            } else {
              this.$message({
                message: resp.msg,
                type: "warning"
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    //查询
    fetchData() {
      roleApi.findByPage(this.currentPage, this.pageSize,this.listLine.sort).then(response => {
        const resp = response.data;
        this.tableData = resp.data.list;
        this.total = resp.data.totalRows;
       
      });
    },
    // 添加
    onSubmitImg() {
      this.FormVisible = true;
      this.form.id = null;
      this.$nextTick(() => {
        // this.$nextTick()它是一个异步事件，当渲染结束 之后 ，它的回调函数才会被执行
        // 弹出窗口打开之后 ，需要加载Dom, 就需要花费一点时间，我们就应该等待它加载完dom之后，再进行调用resetFields方法，重置表单和清除样式
        this.$refs["pojoForm"].resetFields();
      });
    },
    // 数据列表
    memberClick(index, row) {
      this.$router.replace({ path: "/settings/memberManage" });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick(id) {
      this.$router.replace({
        path: "/settings/roleManageSetting",
        query: { id: id }
      });
    },
    handleClickTwo(id) {
      this.onSubmitImg();
      roleApi.findById(id).then(response => {
        const resp = response.data;
        this.form = resp.data;
      });
    },
    
  }
};
</script>

<style>
/* 自定义 */
.form-button-center {
  margin-left: 110px;
}
.select-width-2 {
  width: 100px;
}
.goodsImgList-left {
  float: left;
}
.goodsImgList-mokuai {
  height: 1000px;
  background-color: rgb(249, 249, 249);
}
.goodsImgList-index {
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.goodsImgList-index-top {
  margin-top: 30px;
}
.goodsImgList-name {
  width: 100%;
  height: 50px;
  padding-top: 10px;
  background-color: rgb(240, 240, 240);
}
.goodsImgList-name-font {
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
  font-size: 14px;
}

.freightTemp-index-select {
  width: 300px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;
}
.goodsImgList-index-select-button {
  margin-right: 20px;
}
.goodsImgList-content {
  width: 100%;
  padding-top: 40px;
}
.goodsImgList-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}

.opertation-block {
  display: inline-block;
  margin-left: 3px;
}
.goodsImgList-paging {
  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}

.goodsImgList-paging-layout {
  float: right;
  margin-top: 7px;
}
.custom-class {
  width: 30%;
  margin: auto;
}
</style>